<template>
  <!-- 创建圈子页面 -->
  <view class="main">
    <view class="content">
      <view class="row" @tap="prompt">
        <view class="left">
          <text class="xing">*</text>
          <text class="name">名称</text>
        </view>
        <view class="right">
          <text>{{ title }}</text>
          <image src="../../imges/you.png" mode="aspectFill"></image>
        </view>
      </view>

      <view class="row" @tap="clk()">
        <view class="left">
          <text class="xing">*</text>
          <text class="name">头像</text>
        </view>
        <view class="right">
          <image
            src="../../imges/head_kong.png"
            mode="aspectFill"
            class="photo"
            v-if="photo == ''"
          ></image>
          <image
            :src="photo"
            mode="aspectFill"
            class="photo"
            v-if="photo != ''"
          ></image>

          <image src="../../imges/you.png" mode="aspectFill"></image>
        </view>
      </view>

      <view class="row" @tap="prompt1">
        <view class="left">
          <text class="xing">*</text>
          <text class="name">介绍</text>
        </view>
        <view class="right">
          <text class="text">{{ content }}</text>
          <image src="../../imges/you.png" mode="aspectFill"></image>
        </view>
      </view>

      <navigator
        url="/pages/my_circle/customTagNew"
        hover-class="none"
        class="row"
      >
        <view class="left">
          <text class="name">标签</text>
        </view>
        <view class="right">
          <text class="text">{{ labelstr }}</text>
          <image src="../../imges/you.png" mode="aspectFill"></image>
        </view>
      </navigator>

      <picker
        @change="bindPickerChange"
        :range="array"
        :disabled="guishuData.length == 0 ? true : false"
      >
        <view class="row">
          <view class="left">
            <text class="name">归属</text>
          </view>
          <view class="right" @tap="ifGuishu()">
            <text class="text">{{ array_yes }}</text>
            <image src="../../imges/you.png" mode="aspectFill"></image>
          </view>
        </view>
      </picker>

      <navigator
        url="/pages/my_circle/chooseBusiness"
        hover-class="none"
        v-if="index == 3"
      >
        <!-- v-if="index==3" -->
        <view class="row" style="border-bottom: none">
          <view class="left">
            <text class="xing">*</text>
            <text class="name">行业</text>
          </view>
          <view class="right">
            <text>{{ hangye }}</text>
            <image src="../../imges/you.png" mode="aspectFill"></image>
          </view>
        </view>
      </navigator>
    </view>
    <!-- 保存按钮 -->
    <view class="foot_">
      <view class="btn" @tap="handleBaocan"> 创建 </view>
    </view>

    <avatar
      @upload="doUpload"
      quality="1"
      ref="avatar"
      selWidth="250upx"
      selHeight="250upx"
    ></avatar>

    <view class="tishi" v-if="istishi">
      {{ message }}
    </view>
    <view class="zheZhao" @tap="quMask" v-if="is_mask">
      <view class="modal">
        <view class="header"> 提示 </view>
        <view class="text">
          {{ "是否邀请好友加入圈子？" }}
        </view>
        <view class="btn_">
          <view class="left" @tap.stop="quMask"> 取消 </view>
          <view>
            <view @tap.stop="queren" class="right"> 确认 </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 名称弹窗 -->
    <prompt
      ref="prompt"
      @onConfirm="onConfirm"
      @onCancel="onCancel"
      title="名称"
    ></prompt>
    <!-- 介绍弹窗 -->
    <prompt
      ref="prompt1"
      @onConfirm="onConfirm1"
      @onCancel="onCancel1"
      title="介绍"
    ></prompt>
  </view>
</template>

<script>
import request from "../../utils/request.js";
import prompt from "../../components/prompt.vue";
import avatar from "../../components/yq-avatar/yq-avatar.vue";
export default {
  data() {
    return {
      id: "", // 圈子id
      index: "", //商业
      title: "", //名称
      photo: "", //头像
      hangye: "", //行业
      array: [], //归属数组
      array_yes: "个人（默认）", //归属
      content: "",
      message: "",
      istishi: false,
      is_mask: false,
      upToken: "",
      qiniuyun: "",
      qiniuUrl: "",
      fileUrl: "",
      ischuangjian: false,
      labelList: [], //标签数组
      guishuData: [],
      labelstr: "",
      urls: [],
    };
  },
  components: {
    prompt,
    avatar,
  },
  onShow() {
    let that = this;
    uni.getStorage({
      key: "quanzihangye",
      success: function (res) {
        console.log(res.data);
        that.hangye = res.data.industry;
        that.hangyeId = res.data.id;
      },
    });
    this.labelList = [];
    uni.getStorageSync("labelList").forEach((v) => {
      this.labelList.push(v.label);
    });
    // console.log(this.labelList)
    this.labelstr = this.labelList.join("/");
  },
  onLoad(e) {
    uni.setStorageSync("labelList", []);
    if (e.type) {
      this.index = e.type;
    }
    this.attribution();
    uni.removeStorage({
      key: "quanzihangye",
      success: function (res) {
        console.log("success");
      },
    });
    let that = this;
    request({
      url: "webSite/home/uploadApplication",
      method: "post",
      header: {
        "content-type": "application/json;charset=UTF-8",
        "api-client": "72e0fee8172411ea995200163e05ff66",
        "api-version": "1.3.3",
        "Source-Type": 7,
        // 'token': token
      },
      data: {},
    }).then((res) => {
      that.upToken = res.data.data.upToken;
      that.qiniuyun = res.data.data.qiniuDomain;
      that.qiniuUrl = res.data.data.region;
    });
  },
  methods: {
    clk() {
      this.$refs.avatar.fChooseImg(2, {
        selWidth: "450upx",
        selHeight: "450upx",
        inner: false,
        canRotate: false,
      });
    },
    doUpload(rsp) {
      this.$set(this.urls, rsp.index, rsp.path);
      this.photo = rsp.path;
      uni.uploadFile({
        url: "https://up-z0.qiniup.com",
        filePath: rsp.path,
        name: "file",
        formData: {
          token: this.upToken,
        },
        success: (uploadFileRes) => {
          this.fileUrl =
            this.qiniuyun + "/" + JSON.parse(uploadFileRes.data).key;
          console.log(JSON.parse(uploadFileRes.data).key, this.fileUrl);
        },
      });
    },
    quMask() {
      this.is_mask = false;
      if (this.ischuangjian == true) {
        uni.showToast({
          title: "创建成功",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.reLaunch({
            url: "/pages/index/detail?id=" + this.id + "&type=1",
          });
        }, 1500);
      }
    },
    queren() {
      this.is_mask = false;
      const that = this;
      uni.showToast({
        title: "创建成功",
        duration: 2000,
        icon: "none",
      });
      setTimeout(function () {
        uni.redirectTo({
          url: "/pages/my_circle/inviter?id=" + that.id,
        });
      }, 1500);
    },
    //请求归属列表数据
    attribution() {
      let token = uni.getStorageSync("token");
      const that = this;
      // console.log(token, 'token')
      request({
        url: "app/org/getCreationAscriptionOrg",
        method: "POST",
        header: {
          "content-type": "application/json;charset=UTF-8",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": "1.3.3",
          "Source-Type": 7,
          token: token,
        },
        data: {},
      }).then((res) => {
        if (res.data.code == 200) {
          that.guishuData = res.data.data;
          res.data.data.forEach((v) => {
            that.array.push(v.orgName);
          });
          that.array = ["个人（默认）", ...that.array];
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: "none",
          });
        }
      });
    },
    selctPhone(e) {
      //点击上传图片
      let that = this;
      uni.chooseImage({
        count: 1,
        success: (res) => {
          let tempFilePaths = res.tempFilePaths;
          console.log(tempFilePaths);
          that.photo = tempFilePaths[0];
          uni.uploadFile({
            url: "https://up-z0.qiniup.com",
            filePath: tempFilePaths[0],
            name: "file",
            formData: {
              token: that.upToken,
            },
            success: (uploadFileRes) => {
              that.fileUrl =
                that.qiniuyun + "/" + JSON.parse(uploadFileRes.data).key;
              console.log(JSON.parse(uploadFileRes.data).key, that.fileUrl);
            },
          });
        },
      });
    },
    // 弹窗事件
    prompt: function () {
      this.$refs.prompt.show();
    },
    prompt1: function () {
      this.$refs.prompt1.show();
    },
    onConfirm1: function (e) {
      // console.log(e)
      if (e == undefined) {
        e = "";
      }
      if (e.trim() == "") {
        uni.showToast({
          title: "请先输入！",
          duration: 1500,
          icon: "none",
        });
        return;
      } else {
        if (e.trim().length > 100) {
          uni.showToast({
            title: "介绍不可超过100字！",
            duration: 1500,
            icon: "none",
          });
          return false;
        }
        this.$refs.prompt1.hide();
        this.content = e.trim();
      }
    },
    onCancel1: function () {
      this.$refs.prompt1.hide();
      //this.content = ''
    },
    onConfirm: function (e) {
      // console.log(e);
      if (e == undefined) {
        e = "";
      }
      let _cost = e.trim();
      if (_cost == "") {
        uni.showToast({
          title: "请先输入！",
          duration: 1500,
          icon: "none",
        });
        return;
      } else {
        this.$refs.prompt.hide();
        this.title = _cost;
      }
    },
    onCancel: function () {
      this.$refs.prompt.hide();
      //this.title = ''
    },
    ifGuishu() {
      if (this.guishuData.length == 0) {
        uni.showToast({
          title: "暂无归属",
          duration: 2000,
          icon: "none",
        });
      }
    },
    bindPickerChange(e) {
      this.array_yes = this.array[e.detail.value];
      if (this.guishuData.length > 0) {
        this.dependencyId = this.guishuData[e.detail.value].id;
      }
    },
    chuangjian() {
      let token = uni.getStorageSync("token");
      const that = this;
      request({
        url: "app/orgCircle/createdFriends",
        method: "POST",
        header: {
          "content-type": "application/json;charset=UTF-8",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": "1.3.3",
          "Source-Type": 7,
          token: token,
        },
        data: {
          orgName: this.title,
          orgUrl: this.fileUrl,
          coverUrl: this.fileUrl,
          orgIntroduce: this.content,
          friendsType: this.index,
          businessRange: this.hangyeId,
          labelLists: this.labelList,
          dependencyId: this.dependencyId,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          that.id = res.data.data.id;
          that.ischuangjian = true;
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: "none",
          });
        }
      });
    },
    handleBaocan() {
      //点击保存按钮
      if (this.title == "" || this.title == undefined) {
        uni.showToast({
          title: "名称不能为空",
          duration: 2000,
          icon: "none",
        });
      } else if (this.photo == "" || this.photo == undefined) {
        uni.showToast({
          title: "头像不能为空",
          duration: 2000,
          icon: "none",
        });
      } else if (this.content == "" || this.content == undefined) {
        uni.showToast({
          title: "介绍不能为空",
          duration: 2000,
          icon: "none",
        });
      } else if (
        (this.index == 3 && this.hangye == "") ||
        this.hangye == undefined
      ) {
        uni.showToast({
          title: "行业不能为空",
          duration: 2000,
          icon: "none",
        });
      } else {
        this.chuangjian();
        this.is_mask = true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
page {
  background: rgba(248, 248, 250, 1);
}
.tishi {
  width: 400rpx;
  height: 70rpx;
  // padding-left: 32rpx;
  text-align: center;
  line-height: 70rpx;
  position: absolute;
  top: 80rpx;
  left: 50%;
  margin-left: -200rpx;
  z-index: 99;
  background-color: #f23b3b;
  color: #ffffff;
  font-size: 26rpx;
  border-radius: 35rpx;
}
.zheZhao {
  position: fixed;
  z-index: 999;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  .modal {
    position: relative;
    background-color: #fff;
    border-radius: 8rpx;
    width: 520rpx;
    height: 300rpx;
    box-sizing: border-box;
    padding-top: 30rpx;

    .header {
      width: 100%;
      text-align: center;
      font-size: 40rpx;
      font-family: PingFang SC;
      font-weight: bold;
    }

    .text {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(49, 49, 49, 1);
      width: 100%;
      text-align: center;
      margin-top: 30rpx;
    }

    .btn_ {
      position: absolute;
      bottom: 0;
      height: 85rpx;
      border-top: 2rpx solid #eee;
      width: 100%;
      display: flex;

      view {
        box-sizing: border-box;
        width: 50%;
        height: 85rpx;
        line-height: 85rpx;
        text-align: center;
        font-size: 36rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.4);

        .right {
          width: 100%;
          height: 100%;
          color: #0476fc;
        }
      }

      .left {
        border-right: 2rpx solid #eee;
      }
    }
  }
}
.content {
  margin-top: 20rpx;
  padding: 0 32rpx;
  background-color: #fff;

  .row {
    display: flex;
    justify-content: space-between;
    height: 100rpx;
    align-items: center;
    border-bottom: 2rpx solid rgba(238, 238, 238, 1);

    .left {
      display: flex;
      height: 100%;
      align-items: center;

      .xing {
        color: #f81414;
        margin-right: 10rpx;
        font-size: 40rpx;
        display: inline-block;
        margin-bottom: -18rpx;
      }

      .name {
        font-size: 32rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #464646;
      }
    }

    .right {
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(136, 136, 136, 1);
      display: flex;
      align-items: center;

      .text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        width: 535rpx;
        text-align: right;
      }

      image {
        width: 18rpx;
        height: 35rpx;
        margin-left: 22rpx;
        vertical-align: top;
      }

      .photo {
        width: 64rpx;
        height: 64rpx;
        border-radius: 50%;
      }
    }
  }
}
.foot_ {
  width: 750rpx;
  height: 100rpx;
  background-color: #fff;
  border-top: 2rpx solid #eee;
  position: fixed;
  bottom: 0;
}
.btn {
  width: 686rpx;
  height: 74rpx;
  background: #2168eb;
  border-radius: 37rpx;
  text-align: center;
  line-height: 74rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  margin: 0 auto;
  margin-top: 18rpx;
}
</style>
